<template>
    <div id="chartsContainer"></div>
</template>
<script>
import * as echarts from 'echarts';
import ChartsManager from "../custom-charts/ChartsManager";
import theme from '../custom-charts/theme'
export default {
    mounted(){
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.getElementById('chartsContainer'), theme);

        const chartType = ChartsManager.CHART_TYPE.MARKER_CHART;
        const chartThings = ChartsManager.getChartThings(chartType);
        const {createOption, changeSize} = chartThings.functions;
        const data = chartThings.data;

        const option =  createOption(data, theme, myChart);
        console.log(`ChartType: ${chartType} , 最终option：`, option);
        // 绘制图表
        myChart.setOption(option);

        window.addEventListener("resize", function(){
            if (changeSize) {
                changeSize(myChart);
            }
            myChart.resize();
        })
    }
}
</script>